<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/jquery.easyui.min.js">
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <table id="dg"></table>

    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed:true" style="width:600px;height:450px;padding:10px">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%" />
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="title" style="width:100%" data- options="label:'新闻标题:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="category" style="width:100%" data- options="label:'新闻类别:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="massage" style="width:100%" data- options="label:'新闻内容:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="author" style="width:100%" data- options="label:'评论作者:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="content" style="width:100%" data- options="label:'评论内容:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="releasetime" style="width:100%" data- options="label:'评论时间:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="local" style="width:100%" data- options="label:'评论地点:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="number" style="width:100%" data- options="label:'评论数量:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="fangshi" style="width:100%" data- options="label:'评论方式:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="keywords" style="width:100%" data- options="label:'评论关键:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
</body>

</html>
<script>
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $('#ff').serializeJSON();
                    if ($('#ff').serializeJSON()._id) {
                        $.ajax({
                            url: `http://localhost:3000/classify/${formData._id}`,
                            type: 'put',
                            data: $('#ff').serializeJSON()
                        }).done(function(res) {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    } else {
                        delete formData._id;
                        $.ajax({
                            url: 'http://localhost:3000/classify',
                            type: 'post',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    }

                };
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }
    $('#dg').datagrid({
        url: 'http://localhost:3000/classify/list',
        fit: true,
        pagination: true,
        toolbar: [{
            text: '添加数据',
            iconCls: 'icon-add',
            handler: function() {
                $('#dlg').dialog('open')
            }
        }, '-', {
            text: '删除数据',
            iconCls: 'icon-cut',
            handler: function() {
                alert('delete')
            }
        }],
        columns: [
            [{
                field: 'ck',
                checkbox: true
            }, {
                field: 'title',
                title: '新闻标题',
                width: 100
            }, {
                field: 'category',
                title: '新闻类别',
                width: 100
            }, {
                field: 'massage',
                title: '新闻内容',
                width: 200
            }, {
                field: 'author',
                title: '评论作者',
                width: 100
            }, {
                field: 'content',
                title: '评论内容',
                width: 200
            }, {
                field: 'releasetime',
                title: '评论时间',
                width: 100
            }, {
                field: 'local',
                title: '评论地点',
                width: 100
            }, {
                field: 'number',
                title: '评论数量',
                width: 100
            }, {
                field: 'fangshi',
                title: '评论方式',
                width: 100
            }, {
                field: 'keywords',
                title: '评论关键',
                width: 100
            }, {
                field: '_id',
                title: '操作',
                width: 80,
                formatter: function(value, row, index) {
                    return `<a href="#" onclick="editDate('${row._id}')">修改</a>  <a href="#" onclick="deleteDate('${row._id}')">删除</a>`;
                }
            }]
        ],
        onClickRow: function(index, row) {
            console.log(index, row);
        }
    });

    function deleteDate(id) {
        $.messager.confirm('确认框', '您确认删除该数据？', function(r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/classify/${id}`,
                    type: 'delete'
                }).done(function(res) {
                    $('#dg').datagrid('reload');
                });
            }
        });

    }

    function editDate(id) {
        $.ajax({
            url: `http://localhost:3000/classify/${id}`,
            type: 'get'
        }).done(function(res) {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        });

    }
</script>